import React from "react";
import {
  Box, Grid, Typography, Paper, Button, Chip, IconButton, Divider
} from "@mui/material";

import VisibilityIcon from "@mui/icons-material/Visibility";
import DownloadIcon from "@mui/icons-material/Download";
import HistoryIcon from "@mui/icons-material/History";
import UploadIcon from "@mui/icons-material/Upload";
import AddIcon from "@mui/icons-material/Add";
import EditNoteIcon from "@mui/icons-material/EditNote";
import DescriptionIcon from "@mui/icons-material/Description";
import ArticleIcon from "@mui/icons-material/Article";
import TableChartIcon from "@mui/icons-material/TableChart";
import SlideshowIcon from "@mui/icons-material/Slideshow";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import DoneIcon from "@mui/icons-material/Done";
import { useNavigate } from 'react-router-dom';

import { ThemeProvider, CssBaseline } from "@mui/material";
import theme from "../themes/theme "


const versions = [
  { version: "V2.0.1", date: "2025-05-15", author: "张工", desc: "新增数字化能力指标", current: true },
  { version: "V2.0.0", date: "2025-04-22", author: "李工", desc: "新增数字化能力指标" },
  { version: "V1.5.2", date: "2025-02-10", author: "王工", desc: "新增数字化能力指标" },
  { version: "V1.5.1", date: "2025-01-05", author: "张工", desc: "新增数字化能力指标" },
];

const documents = [
  { name: "标准评分规则", type: "PDF", size: "2.4MB", date: "2025-05-10", icon: <DescriptionIcon /> },
  { name: "标准评分规则", type: "Word", size: "1.8MB", date: "2025-04-30", icon: <ArticleIcon /> },
  { name: "标准评分规则", type: "Excel", size: "0.9MB", date: "2025-04-15", icon: <TableChartIcon /> },
  { name: "标准评分规则", type: "PPT", size: "5.2MB", date: "2025-03-22", icon: <SlideshowIcon /> },
];

const App: React.FC = () => {
  const navigate = useNavigate(); 
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Button
  variant="outlined"
  onClick={() => navigate("/")}
  sx={{ mb: 2 }}
>
  ← 返回模型列表
</Button>
      <Box
        sx={{
          backgroundImage: `radial-gradient(circle at 1px 1px, #1e3350 1px, transparent 0)`,
          backgroundSize: "20px 20px",
          minHeight: "100vh",
          p: 4
        }}
      >
        <Grid container spacing={3}>
          {/* 模型版本列表与管理 */}
          <Grid item xs={12} md={6}>
            <Paper sx={{ p: 2 }}>
              <Typography variant="h6" gutterBottom>🧩 模型版本列表与管理</Typography>
              <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
                <Typography variant="subtitle1">评估模型版本历史</Typography>
                <Button variant="outlined" startIcon={<AddIcon />} color="secondary">
                  发布新版本
                </Button>
              </Box>
              {versions.map((v, index) => (
                <Box key={index} display="flex" alignItems="center" justifyContent="space-between" py={1}>
                  <Box>
                    <Typography variant="body1" fontWeight="bold">{v.version}</Typography>
                    <Typography variant="caption">{v.date} · {v.author}</Typography>
                    <Typography variant="body2" mt={0.5}>{v.desc}</Typography>
                  </Box>
                  <Box textAlign="right">
                    {v.current ? (
                      <Chip label="当前版本" color="success" size="small" sx={{ mb: 1 }} />
                    ) : (
                      <Button variant="outlined" size="small" sx={{ mb: 1 }}>设为当前</Button>
                    )}
                    <br />
                    <Button variant="outlined" size="small">查看</Button>
                  </Box>
                </Box>
              ))}
            </Paper>
          </Grid>

          {/* 辅助材料管理 */}
          <Grid item xs={12} md={6}>
            <Paper sx={{ p: 2 }}>
              <Typography variant="h6" gutterBottom>📄 辅助材料管理</Typography>
              <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
                <Typography variant="subtitle1">评估模型相关文档</Typography>
                <Button variant="outlined" startIcon={<UploadIcon />} color="secondary">
                  上传文档
                </Button>
              </Box>
              {documents.map((doc, index) => (
                <Box key={index} display="flex" alignItems="center" justifyContent="space-between" py={1}>
                  <Box display="flex" alignItems="center">
                    <Box mr={1}>{doc.icon}</Box>
                    <Box>
                      <Typography>{doc.name}</Typography>
                      <Typography variant="caption">{doc.type} · {doc.size} · {doc.date}</Typography>
                    </Box>
                  </Box>
                  <Box>
                    <IconButton><VisibilityIcon /></IconButton>
                    <IconButton><DownloadIcon /></IconButton>
                    <IconButton><HistoryIcon /></IconButton>
                  </Box>
                </Box>
              ))}
            </Paper>
          </Grid>

          

          {/* 文档版本历史示例 */}
          <Grid item xs={12} md={6}>
            <Paper sx={{ p: 2, backgroundColor: "#112244" }}>
              <Typography variant="subtitle1" gutterBottom>文档版本历史示例</Typography>
              <Typography variant="body2" mb={1}>使用标准手册 - 版本历史</Typography>
              <Divider />
              <Box display="flex" justifyContent="space-between" py={1}>
                <Typography>V2.0.1 · 2025-05-10</Typography>
                <Chip label="当前版本" size="small" color="success" />
              </Box>
              <Box display="flex" justifyContent="space-between" py={1}>
                <Typography>V2.0.0 · 2025-03-15</Typography>
                <Button size="small">下载</Button>
              </Box>
              <Box display="flex" justifyContent="space-between" py={1}>
                <Typography>V1.5.2 · 2025-01-22</Typography>
                <Button size="small">下载</Button>
              </Box>
              <Box display="flex" justifyContent="space-between" py={1}>
                <Typography>V1.5.1 · 2025-01-22</Typography>
                <Button size="small">下载</Button>
              </Box>
              <Box display="flex" justifyContent="flex-end">
                <Button size="small">关闭</Button>
              </Box>
            </Paper>
          </Grid>
        </Grid>
      </Box>
    </ThemeProvider>
  );
};

export default App;
